import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd'
import FullinkOfSpu from './components/FullinkOfSpu'
import FullinkOfBigClass from './components/FullinkOfBigClass'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAppSelector } from '@/store/hooks'
const Index: React.FC = () => {
  const buttonCodeList = useAppSelector((state) => state.login.buttonCodeList) || []
  const [menuItems, setmenuItems] = useState<{ key: string; label: string; children: React.ReactNode }[]>([])
  const [defaultKey, setdefaultKey] = useState('')
  const [query] = useSearchParams()
  const navigate = useNavigate()
  useEffect(() => {
    const items: { key: string; label: string; children: React.ReactNode }[] = []
    if (buttonCodeList.includes('FullinkOfBigClass')) {
      items.push({
        key: 'bigclass',
        label: '大类维度',
        children: <FullinkOfBigClass setdefaultKey={setdefaultKey} />,
      })
      setdefaultKey('bigclass')
    }
    if (buttonCodeList.includes('FullinkOfSpu')) {
      items.length === 0 && setdefaultKey('spu')
      items.push({
        key: 'spu',
        label: 'SPU维度',
        children: <FullinkOfSpu />,
      })
    }
    if (items.length === 0) {
      navigate('/403', { replace: true })
      return
    }
    setmenuItems(items)
    const type = query.get('type') || ''
    if (type) {
      setdefaultKey(type)
    }
  }, [])
  return (
    <Tabs
      activeKey={defaultKey}
      items={menuItems}
      onChange={(key) => {
        setdefaultKey(key)
        navigate(`/monitor/fulllink/list${key === 'spu' ? '?type=spu' : ''}`)
      }}
    ></Tabs>
  )
}

export default Index
